<template>
  <div id="index">
    <div id="edit" :style="{ top: isedit ? '0vh' : '-100vh' }">
      <Edit
        :item="itemname"
        :id="itemid"
        :edittype="edit"
        @calitem="
          () => {
            this.isedit = false;
          }
        "
      ></Edit>
    </div>
    <div id="nav">
      <Nav @useredit="edituser"></Nav>
    </div>
    <el-row style="margin-top: 15px"
      ><el-col :span="18" :offset="3">
        <el-row :gutter="4">
          <el-col :span="16">
            <div class="home">
              <DateView @getselectdate="getselectitem"></DateView>
              <div class="hotbox">
                <HotView></HotView>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="home">
              <el-row style="margin: 10px; text-align: center">
                <h3 id="ingitem" :title="iteming ? iteming.name : '无任务'">
                  进行中的任务：{{ iteming ? iteming.name : '无任务' }}
                </h3>
              </el-row>
              <el-row class="timebtn">
                <img
                  v-show="timestate"
                  src="../assets/开始.png"
                  alt=""
                  @click="starttime()"
                />

                <img
                  v-show="!timestate"
                  src="../assets/暂停.png"
                  alt=""
                  @click="pausetime()"
                />
                <img src="../assets/结束.png" alt="" @click="stoptime" />
                <img src="../assets/完成.png" alt="" @click="ingfinish" />
              </el-row>
              <el-row>
                <div class="timebox">
                  <span id="h">{{ h }}</span
                  >:<span id="m">{{ m }}</span
                  >:<span id="s">{{ s }}</span>
                </div>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col></el-row
    >
    <el-row style="margin-top: 15px"
      ><el-col :span="18" :offset="3">
        <el-row :gutter="4">
          <el-col :span="8">
            <el-row>
              <el-col :span="24">
                <div class="datachart home">
                  <div style="width: 200px; margin: 30px auto 20px auto">
                    <el-progress
                      type="circle"
                      :stroke-width="30"
                      :width="200"
                      :percentage="jd || 0"
                    ></el-progress>
                  </div>
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <el-col :span="24" style="color: #f4a460">
                          <h2>进行中</h2>
                          <h2>{{ ingnum }}</h2>
                        </el-col>
                      </el-row>
                      <span></span
                    ></el-col>
                    <el-col :span="12">
                      <el-row>
                        <el-col style="color: rgb(19, 206, 102)" :span="24">
                          <h2>已完成</h2>
                          <h2>
                            {{ finishnum }}
                          </h2>
                        </el-col>
                      </el-row>
                      <span></span
                    ></el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="16">
            <div class="container home">
              <div class="input">
                <Input :selectdate="dateselect"></Input>
              </div>
              <div class="box">
                <ItemList
                  :selectdate="dateselect"
                  @edit="edititem"
                  @itemstart="itemstart"
                ></ItemList>
              </div>
            </div>
          </el-col>
        </el-row> </el-col
    ></el-row>
  </div>
</template>

<script>
import ItemList from '../components/itemlist.vue';
import Input from '../components/iteminput.vue';
import Nav from '../components/nav.vue';
import Edit from '../components/edit.vue';
import DateView from '../components/dateview.vue';
import HotView from '../components/hotview.vue';
export default {
  data() {
    return {
      itemname: '',
      itemid: '',
      isedit: false,
      edit: '',
      timestate: true,
      h: '00',
      m: '00',
      s: '00',
      timer: null,
      iteming: null,
      dateselect: '',
    };
  },
  components: { ItemList, Input, Nav, Edit, DateView, HotView },
  methods: {
    getselectitem(e) {
      this.dateselect = e;
      this.getItems();
    },
    async starttime() {
      if (this.iteming) {
        this.timestate = false;
        this.timeer = this.timestart();
      } else {
        alert('请选择任务');
      }
    },
    async pausetime() {
      if (this.iteming) {
        let time =
          Number(this.h) * 60 * 60 + Number(this.m) * 60 + Number(this.s);
        let res = await this.axios.post('item/settime', {
          id: this.iteming.id,
          time,
        });
        if (res.data.status == 200) {
          this.timestate = true;
          clearInterval(this.timeer);
          this.timeer = null;
        }
      } else {
        alert('请选择任务');
      }
    },
    async stoptime() {
      if (this.iteming) {
        let time =
          Number(this.h) * 60 * 60 + Number(this.m) * 60 + Number(this.s);
        let res = await this.axios.post('item/stop', {
          id: this.iteming.id,
          time,
        });
        if (res.data.status == 200) {
          this.getItems();
          this.timestate = true;
          clearInterval(this.timeer);
          this.timeer = null;
          this.h = '00';
          this.m = '00';
          this.s = '00';
          this.iteming = null;
        }
      } else {
        alert('请选择任务');
      }
    },
    edititem(id, name) {
      this.itemname = name;
      this.itemid = id;
      this.edit = 'item';
      this.isedit = true;
    },
    edituser() {
      this.isedit = true;
      this.edit = 'user';
    },
    timestart() {
      return setInterval(() => {
        if (Number(this.m) + 1 >= 60 && Number(this.s) + 1 >= 60) {
          this.h =
            Number(this.h) + 1 < 10
              ? '0' + (Number(this.h) + 1)
              : Number(this.h) + 1;
        }
        if (Number(this.s) + 1 >= 60) {
          this.m =
            Number(this.m) + 1 < 10
              ? '0' + (Number(this.m) + 1)
              : Number(this.m) + 1 < 60
              ? Number(this.m) + 1
              : '00';
        }
        this.s =
          Number(this.s) + 1 < 10
            ? '0' + (Number(this.s) + 1)
            : Number(this.s) + 1 < 60
            ? Number(this.s) + 1
            : '00';
      }, 1000);
    },
    itemstart(e) {
      if (this.iteming) {
        alert('已经有任务在进行中了~ ~');
      } else {
        this.iteming = e;
        let time = e.time;
        let h = parseInt(time / 3600);
        let m = parseInt((time / 60) % 60);
        let s = Math.ceil(time % 60);
        let hours = h < 10 ? '0' + h : h;
        let minute = m < 10 ? '0' + m : m;
        let second = s > 59 ? 59 : s < 10 ? '0' + s : s;
        this.h = hours;
        this.m = minute;
        this.s = second;
      }
    },
    async getItems() {
      if (!this.dateselect) {
        let now = new Date();
        this.dateselect = `${now.getFullYear()}-${
          now.getMonth() + 1
        }-${now.getDate()}`;
      }
      let datetime = this.dateselect;
      let res = await this.axios.get('/item/search', {
        params: { key: '', datetime },
      });
      let itemlist = res.data.data;

      itemlist.n.items.forEach((e) => {
        if (Number(e.ingstate)) {
          this.iteming = e;
          let time = e.time;
          let h = parseInt(time / 3600);
          let m = parseInt((time / 60) % 60);
          let s = Math.ceil(time % 60);
          let hours = h < 10 ? '0' + h : h;
          let minute = m < 10 ? '0' + m : m;
          let second = s > 59 ? 59 : s < 10 ? '0' + s : s;
          this.h = hours;
          this.m = minute;
          this.s = second;
        }
      });
      this.$store.commit('GetItemList', {
        y: itemlist.y.items,
        n: itemlist.n.items,
      });
      let { data } = await this.axios.get('/user/getuser');
      let user = data.data[0];
      this.$store.commit('GetUser', user);
    },
    async ingfinish() {
      if (this.iteming) {
        let id = this.iteming.id;
        let date = new Date();
        let datetime = `${date.getFullYear()}-${
          date.getMonth() + 1
        }-${date.getDate()}`;
        let res = await this.axios.post('/item/switchstate', {
          id,
          state: 1,
          datetime,
        });
        if (res.data.status == 200) {
          this.stoptime();
          this.getItems();
        }
      } else {
        alert('请选择任务');
      }
    },
  },
  computed: {
    jd() {
      return parseInt(
        (this.$store.state.ylist.length /
          (this.$store.state.ylist.length + this.$store.state.nlist.length)) *
          100
      );
    },
    ingnum() {
      return this.$store.state.nlist.length;
    },
    finishnum() {
      return this.$store.state.ylist.length;
    },
  },
  async created() {
    this.getItems();
  },
};
</script>

<style scoped>
.input {
  width: 300px;
  height: 40px;
  margin: 15px auto 0 auto;
  border: 1px solid#f4a460;
}
.home {
  box-shadow: 0px 0px 9px rgb(133, 133, 133);
  background-color: rgb(255, 255, 255);
  height: 300px;
  overflow: hidden;
  position: relative;
}
.container {
  height: 350px;
  position: relative;
  overflow: hidden;
}
.datachart {
  overflow: hidden;
  height: 350px;
  text-align: center;
}

.box {
  width: 102%;
  height: 265px;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#nav {
  width: 100%;
  height: 60px;
  box-shadow: 0px 0px 9px rgb(33, 32, 32);
}
#edit {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
  transition: all 0.5s;
}
.current {
  width: 10px !important;
  height: 10px !important;
}
.timebox {
  width: 200px;
  height: 200px;
  border: 1px solid;
  border-radius: 50%;
  margin: 10px auto;
  font-weight: bolder;
  font-size: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timebtn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.timebtn img {
  width: 30px;
  height: 30px;
}
.timebtn img:nth-of-type(3) {
  width: 35px;
  height: 35px;
}
.hotbox {
  width: 85%;
  height: 150px;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -20%);
}
#ingitem {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
